﻿<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="ui" tagdir="/WEB-INF/tags"%>
	<style>
	/*搜索框 BEGIN*/
	.cf:before, .cf:after{
	content:"";
	display:table;
	}
	.cf:after{
	clear:both;
	}
	.cf{
	zoom:1;
	margin-top: 6px;
	}
	/* Form wrapper styling */
	.form-wrapper {
	display: flex;
	position: relative;
	width: 450px;
	/*padding: 15px;*/
	/*margin: 15px auto 50px auto;*/
	background: #444;
	background: rgba(0,0,0,.2);
	border-radius: 10px;
	box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
	}
	/* Form text input */
	.form-wrapper input {
	flex: 1 1 0%;
	/*height: 40px;*/
	padding: 10px 5px;
	float: left;
	font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
	border: 0;
	background: #eee;
	border-radius: 3px 0 0 3px;
	}
	.form-wrapper input:focus {
	outline: 0;
	border: 0;
	background: #fff;
	box-shadow: 0 0 1px rgba(0,0,0,1) inset;
	}
	.form-wrapper input::-webkit-input-placeholder {
	color: #999;
	font-weight: normal;
	font-style: italic;
	}
	.form-wrapper input:-moz-placeholder {
	color: #999;
	font-weight: normal;
	font-style: italic;
	}
	.form-wrapper input:-ms-input-placeholder {
	color: #999;
	font-weight: normal;
	font-style: italic;
	}
	/* Form submit button */
	.form-wrapper button {
	flex: 0 0 110px;
	overflow: visible;
	position: relative;
	float: right;
	border: 0;
	padding: 0;
	cursor: pointer;
	height: 40px;
	font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
	color: #fff;
	text-transform: uppercase;
	background: #d83c3c;
	border-radius: 0 3px 3px 0;
	text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
	}
	.form-wrapper button:hover{
	background: #e54040;
	}
	.form-wrapper button:active,
	.form-wrapper button:focus{
	background: #c42f2f;
	outline: 0;
	}
	.form-wrapper button:before { /* left arrow */
	content: '';
	position: absolute;
	border-width: 8px 8px 8px 0;
	border-style: solid solid solid none;
	border-color: transparent #d83c3c transparent;
	top: 12px;
	left: -6px;
	}
	.form-wrapper button:hover:before{
	border-right-color: #e54040;
	}
	.form-wrapper button:focus:before,
	.form-wrapper button:active:before{
	border-right-color: #c42f2f;
	}
	.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
	border: 0;
	padding: 0;
	}
	.del{
	display: block;
	position: absolute;
	top: 13px;
	right: 135px;
	width: 30px;
	height: 30px;
	background-size: contain;
	z-index: 999;
	opacity: 0;
	filter: alpha(opacity = 0);
	cursor: pointer;
	}
	@media (max-width:1150px){
		.form-wrapper{
			width: 400px;
		}
	}
	@media (max-width:1080px){
		.form-wrapper{
			width: 350px;
		}
	}
	/*搜索框END*/
	.positionA{
	position: relative;
	}
	.highLight{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: red;
	}
	.positionA em{
	position: absolute;
	right: 10px;
	top: 5px;
	}
	em{
	color: red;
	display: none;
	}
	</style>
<header id="header">
	<div class="header-left">
		<div class="navbar-minimize-mobile left">
			<i class="fa fa-bars"></i>
		</div>
		<!-- 系统标题，LOGO -->
		<div class="navbar-header">
			<a class="navbar-brand" href="javascript:index.gomain();">${appName }</a>
		</div>
		<!-- 展开收缩按钮 -->
		<div class="navbar-minimize-mobile right">
			<i class="fa fa-cog"></i>
		</div>
	
		<div class="clearfix"></div>
	</div>
	
	<div class="header-right">
		<!-- Start navbar toolbar -->
		<div class="navbar navbar-toolbar">
	
			<!-- Start left navigation -->
			<ul class="nav navbar-nav navbar-left">
	
				<!-- Start sidebar shrink -->
				<li class="navbar-minimize"><a href="javascript:void(0);"
					title="Minimize sidebar"> <i class="fa fa-bars"></i>
				</a></li>
				<!--/ End sidebar shrink -->
	
			</ul>
			<!-- /.nav navbar-nav navbar-left -->
			<!--/ End left navigation -->
			<!-- Start right navigation -->
			<ul class="nav navbar-nav navbar-right">
	            <li class="dropdown navbar-profile">
	               <div class="form-wrapper cf" >
	                  <input type="text" placeholder="搜索" id="Search"  onkeyup="Input(this,event)">
	                  <span class="fa fa-times del" onclick="del()"></span>
	                  <button type="button" onclick="Submit()">搜一下</button>
	               </div>
	            </li>
	           <li class="dropdown navbar-profile">
	             <input type="hidden" id="userId" value="${currentuser.userId}">
	             <a href="#" class="dropdown-toggle positionA" data-toggle="dropdown">
	               <span class="meta">
	                  <span class="text hidden-xs hidden-sm text-muted">未读消息<em class="highLight"></em></span>
	                  <span class="caret"></span>
	              </span>
	             </a>
	             <ul class="dropdown-menu animated flipInX">
	                <li class="hrefA"><a href="#" class="positionA" target="main" onclick="index.addCount('8a21d2ab5dab22a7015dbb6060680001')"><i class="fa fa-commenting-o" aria-hidden="true"></i>未读指令&nbsp&nbsp<em class="orderEm"></em></a></li>
	                <li class="divider"></li>
	                <li class="hrefA"><a href="#" class="positionA" target="main" onclick="index.addCount('8a21d2ab5dab22a7015dbb6060680001')"><i class="fa fa-comments-o" aria-hidden="true"></i>未读信息&nbsp&nbsp<em class="msgEm"></em></a></li>
	             </ul>
	            </li>
				<li class="dropdown navbar-profile">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<span class="meta">
						<span class="text hidden-xs hidden-sm text-muted">${currentOrg.orgName}</span>
			<!--			<span class="caret"></span>  -->
					</span>
					</a>
			<!--		<ul class="dropdown-menu animated flipInX">
						<li class="dropdown-header">切换组织</li>
						<c:forEach var="org" items="${orgList}" varStatus="status">
							<li class="divider"></li>
							<li><a href="javascript:index.changeOrg('${org.orgId}');"><i class="fa fa-edit"></i>${org.orgName}</a></li>
						 </c:forEach>
					</ul> -->
				</li>
			<!--	<li class="dropdown navbar-profile">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<span class="meta">
						<span class="text hidden-xs hidden-sm text-muted">${currentSystem.systemName}</span>
						<span class="caret"></span>
					</span>
					</a>
					<ul class="dropdown-menu animated flipInX">
						<li class="dropdown-header">切换子系统</li>
						<c:forEach var="system" items="${systemList}" varStatus="status">
							<li class="divider"></li>
							<li><a href="javascript:index.changeSystem('${system.systemId}');"><i class="fa fa-edit"></i>${system.systemName}</a></li>
					 	</c:forEach>
					</ul> 
				</li> -->
				<!-- Start profile -->
				<li class="dropdown navbar-profile">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<span class="meta">
						<span class="avatar"><img src="${ctx}/static/showcase/images/1.png" class="img-circle" alt="admin"></span>
						<span class="text hidden-xs hidden-sm text-muted">${currentuser.name}</span>
						<span class="caret"></span>
					</span>
					</a>
					<ul class="dropdown-menu animated flipInX">
						<li class="dropdown-header">设置</li>
						<li><a href="javascript:index.changePassword();"><i class="fa fa-edit"></i>修改密码</a></li>
						<li class="divider"></li>
						<li><a href="<c:url value='/logout'/>"><i class="fa fa-sign-out"></i>退出</a></li>
					</ul> 
				</li>
				<!--/ End dropdown menu -->
				<li class="navbar-setting pull-right">
					<a href="javascript:void(0);"><i class="fa fa-cog fa-spin"></i></a>
				</li>
			</ul>
		</div>
	</div>
</header>
	<script src="${ctx}/static/portal/js/server.js"></script>
	<script>
	function Input(item,event){
	if($(item).val().length > 0){
	$('.del').animate({
	opacity: 1,
	filter: 'alpha( opacity = 1)'
	},100)
	} else {
	$('.del').animate({
	opacity: 0,
	filter: 'alpha( opacity = 0)'
	},100)
	}
	event = event ? event : window.event;
	if(event.keyCode == '13'){
		Submit();
	}
	}
	function del(){
	$('#Search').val('');
	$('.del').animate({
	opacity: 0,
	filter: 'alpha( opacity = 0)'
	},100)
	}
        function Submit(){
           var value = $.trim($('#Search').val());
               value = encodeURI( searchUrl + 'statis?key=' + value);
           window.open(value,'_blank' );
        }
	$('.hrefA a').attr('href',searchUrl + 'order');
	$.ajax({
    	type: 'get',
	    url: server + 'command/unreadInfo',
	    data: {userid: $('#userId').val()},
	    success: function(response) {
          if(response.responseCode == '1000'){
	          if(response.content[0] == 0 && response.content[1] == 0){
	            console.log('NoMessage');
	          }else{
	            $('.highLight').css('display','block');
	            if(response.content[0] > 0){
	               $('.orderEm').css('display','block').html(response.content[0]);
	             }else{
	               $('.orderEm').css('display','none').html('');
	             }
	             if(response.content[1] > 0){
	               $('.msgEm').css('display','block').html(response.content[1]);
	             }else{
	               $('.msgEm').css('display','none').html('');
	             }
	          }
	       }else{
	        console.log('error');
	       }
	    },
	    error:function(msg){
	      console.log(msg);
	    }
	})
	</script>